<template>
  <div class="bottom-1">
    <div class="bottom-4">
      <h4>
        <span>贵州理工医疗器材股份有限公司</span>
        <br> 地址：花溪大学城贵州理工学院
      </h4>
      <!--  二维码 -->
      <div class="row-1">
          <img src="./images/phone.jpg">
          手机访问
      </div>

    </div>
    <div class="rightBar">
      <!--   底部介绍 医疗 服务 产品 介绍     -->
      <div class="bottom-3-1">
        <h3>产品</h3>
        <ul class="bottom-3-1-2">
          <li>
            <a href="#" style="color: white">电动轮椅</a>
          </li>
          <li>
            <a href="#" style="color: white">特殊轮椅</a>
          </li>
          <li>
            <a href="#" style="color: white">折叠轮椅</a>
          </li>
          <li>
            <a href="#" style="color: white">运动轮椅</a>
          </li>
          <li>
            <a href="#" style="color: white">躺式轮椅</a>
          </li>
        </ul>
      </div>
      <!--  服务介绍 -->
      <div class="bottom-3-1">
        <h3>服务</h3>
        <ul class="bottom-3-1-2">
          <li>
            <a href="#" style="color: white">常见问题</a>
          </li>
          <li>
            <a href="#" style="color: white">视频中心</a>
          </li>
          <li>
            <a href="#" style="color: white">产品使用</a>
          </li>
          <li>
            <a href="#" style="color: white">说明</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Footer"
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
li {
  display: inline-block;
  text-align: center;
  line-height: 80px;
  font-size: 18px;
  list-style: none;
  width: 200px;
}
/* 鼠标滑动变效果*/
li:hover {
  border-top: 1px solid #ffc107;
}
li:hover a {
  color: #ffc107;
}
li a {
  display: inline-block;
  color: #383838;
  text-decoration: none;
}

/*    底部导航  下框架容器  */
.bottom-1 {
  width: 100%;
  background-color: #27313b;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.bottom-4 {
  width: 300px;
  height: 340px;
}

.bottom-4 h4 {
  font-size: 20px;
  color: white;
  line-height: 30px;
}

.row-1 {
  margin-left: 100px;
  margin-top: 20px;
  display: flex;
  flex-flow: column;
  align-items: center;
  text-align: center;
  background-color: white;
  width: 80px;
}

.rightBar{
  display: flex;
  width: 50%;
  justify-content: space-evenly;
}

/*    轮椅介绍 */
.bottom-3-1 {
  padding: 50px 0;
  color: white;
  width: 200px;
}

.bottom-3-1 h3 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.bottom-3-1-2 {
  list-style-type: none;
}

.bottom-3-2 h3 {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
